<template>
    <div class="detail">
        <!-- 顶部 -->
        <header class="detail-header">
            <div class="header-left" @click="back">
                <svg t="1636616685570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" fill="#666666" p-id="2420"></path></svg>
            </div>
            <div class="header-right" @click="showChoice">
                <svg t="1637133829379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2549" width="200" height="200"><path d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z" p-id="2550"></path></svg>
            </div>
        </header>
        <!-- 词条详情 -->
        <main class="detail-main">
        <div class="entry">
            <div class="user">
                <div class="img-box"></div>
                <p>{{detailObj.writer}}</p>
            </div>
            <p class="title">{{detailObj.title}}</p>
            <div class="info">
                <span class="time">{{detailObj.time}}</span>
                <span class="browse">{{detailObj.browse}}次浏览</span>
            </div>
            <div class="content">
                <p v-for="item in detailObj.content">{{item}}</p>
            </div>
            <!-- 图片 -->
            <div class="img-li">
                <div class="img-box" v-for="item in detailObj.imgArr" :key="item.id">
                    <img :src="item.urlStr" alt="">
                </div>
            </div>
            <div class="entry-bot">
                <div>
                    <svg t="1636593252379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3104" width="200" height="200"><path d="M880 640v144c0 35.2-28.8 64-64 64H208c-35.2 0-64-28.8-64-64V240c0-35.2 28.8-64 64-64h208c17.6 0 32-14.4 32-32s-14.4-32-32-32H208c-70.4 0-128 57.6-128 128v544c0 70.4 57.6 128 128 128h608c70.4 0 128-57.6 128-128v-144c0-17.6-14.4-32-32-32s-32 14.4-32 32z" fill="#707070" p-id="3105"></path><path d="M835.2 176H624c-17.6 0-32-14.4-32-32s14.4-32 32-32h288c9.6 0 17.6 3.2 22.4 9.6 6.4 4.8 9.6 12.8 9.6 22.4v288c0 17.6-14.4 32-32 32s-32-14.4-32-32V220.8L403.2 699.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L835.2 176z" fill="#707070" p-id="3106"></path></svg>
                </div>
                <div @click="addCollectArr(detailObj)" :class="detailObj.isCollected?'active':''">
                    <svg t="1636593291236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4021" width="200" height="200"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="4022" fill="#707070"></path></svg>
                    <span>{{detailObj.collectCount}}</span>
                </div>
                <div>
                    <svg t="1636593345836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4934" width="200" height="200"><path d="M896 51.2H128C57.344 51.2 0 108.544 0 179.2v460.8c0 70.656 57.344 128 128 128h102.4v210.944L464.896 768H896c70.656 0 128-57.344 128-128V179.2c0-70.656-57.344-128-128-128z m76.8 588.8c0 42.496-34.304 76.8-76.8 76.8H445.44l-56.832 51.2L281.6 864.256V716.8H128c-42.496 0-76.8-34.304-76.8-76.8V179.2c0-42.496 34.304-76.8 76.8-76.8h768c42.496 0 76.8 34.304 76.8 76.8v460.8z" p-id="4935" fill="#707070"></path><path d="M256 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="4936" fill="#707070"></path><path d="M512 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="4937" fill="#707070"></path><path d="M768 409.6m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" p-id="4938" fill="#707070"></path></svg>
                    <span>{{detailObj.commentCount}}</span>
                </div>
                <div @click="addLikeArr(detailObj)" :class="detailObj.isLiked?'active':''">
                    <svg t="1636593386275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5866" width="200" height="200"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="5867" fill="#707070"></path></svg>
                    <span>{{detailObj.likeCount}}</span>
                </div>
            </div>
        </div>
        </main> 

        <!-- 更多选项的遮罩层 -->
        <choice>
            <template #more>
                <!-- 我的创作 -->
                <div class="more-box" v-if="pageChoice">
                    <p>更多</p>
                    <div class="more-tab">
                        <div>
                            <svg t="1637139551861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="200" height="200"><path d="M753.784471 870.520471c0 34.334118-26.985412 62.162824-60.235295 62.223058h-542.117647c-33.310118 0-60.235294-27.888941-60.235294-62.223058v-559.585883c0-34.334118 26.925176-62.162824 60.235294-62.162823h542.117647c33.249882 0 60.235294 27.828706 60.235295 62.162823v559.585883z m-60.235295-683.91153h-542.117647c-66.56 0-120.470588 55.657412-120.470588 124.325647v559.585883c0 68.668235 53.910588 124.385882 120.470588 124.385882h542.117647c66.499765 0 120.470588-55.657412 120.470589-124.385882v-559.585883c0-68.668235-53.970824-124.325647-120.470589-124.325647" fill="#666666" p-id="3545"></path><path d="M211.365647 808.056471h240.941177v-62.223059h-240.941177v62.223059z m0-124.385883h421.647059v-62.162823h-421.647059v62.162823z m0-124.325647h421.647059V497.121882h-421.647059v62.223059z m0-124.385882h421.647059V372.856471h-421.647059V434.898824z" fill="#666666" p-id="3546"></path><path d="M875.098353 0.180706h-542.117647c-66.56 0-120.470588 55.657412-120.470588 124.325647h60.235294c0-34.334118 26.985412-62.162824 60.235294-62.162824h542.117647c33.249882 0 60.235294 27.828706 60.235294 62.162824v559.585882c0 34.334118-26.985412 62.162824-60.235294 62.223059v62.162824c66.56 0 120.470588-55.657412 120.470588-124.385883v-559.585882c0-68.668235-53.910588-124.325647-120.470588-124.325647" fill="#666666" p-id="3547"></path></svg>
                            <span>复制内容</span>
                        </div>
                        <div @click="editCreation">
                            <svg t="1637139575880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4361" width="200" height="200"><path d="M247.0912 996.1472 100.5568 996.1472c-39.936 0-72.4992-32.5632-72.4992-72.4992L28.0576 81.92c0-39.936 32.5632-72.4992 72.4992-72.4992l766.0544 0c39.936 0 72.4992 32.5632 72.4992 72.4992l0 210.5344c0 12.3904-10.0352 22.528-22.528 22.528s-22.528-10.0352-22.528-22.528L894.0544 81.92c0-15.1552-12.288-27.5456-27.5456-27.5456L100.5568 54.3744c-15.1552 0-27.5456 12.288-27.5456 27.5456L73.0112 923.648c0 15.1552 12.288 27.5456 27.5456 27.5456l146.5344 0c12.3904 0 22.528 10.0352 22.528 22.528S259.4816 996.1472 247.0912 996.1472z" p-id="4362"></path><path d="M745.2672 192.1024 174.6944 192.1024c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l570.5728 0c12.3904 0 22.528 10.0352 22.528 22.528S757.6576 192.1024 745.2672 192.1024z" p-id="4363"></path><path d="M437.6576 429.6704 174.6944 429.6704c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l262.9632 0c12.3904 0 22.528 10.0352 22.528 22.528S450.1504 429.6704 437.6576 429.6704z" p-id="4364"></path><path d="M620.6464 310.8864 174.6944 310.8864c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l445.952 0c12.3904 0 22.528 10.0352 22.528 22.528S633.1392 310.8864 620.6464 310.8864z" p-id="4365"></path><path d="M399.6672 1009.8688c-6.2464 0-12.288-2.56-16.5888-7.2704-5.2224-5.7344-7.168-13.7216-5.12-21.2992l40.8576-146.6368c1.024-3.6864 3.072-7.168 5.7344-9.8304l408.9856-408.9856c14.1312-14.0288 36.9664-14.0288 51.0976 0l97.792 97.792c6.8608 6.8608 10.5472 15.872 10.5472 25.4976s-3.7888 18.7392-10.5472 25.4976L928.8704 618.496c-4.1984 4.1984-9.9328 6.5536-15.872 6.5536s-11.6736-2.3552-15.872-6.5536l-66.048-66.048c-8.8064-8.8064-8.8064-23.04 0-31.8464s23.04-8.8064 31.8464 0l50.176 50.176 31.4368-31.4368L859.136 454.0416 460.6976 852.48 431.104 958.6688 546.7136 936.96l231.7312-231.7312c5.0176-5.4272 50.7904-52.6336 107.2128-56.7296 12.3904-0.9216 23.1424 8.3968 24.064 20.7872 0.9216 12.3904-8.3968 23.1424-20.7872 24.064-40.3456 2.9696-77.4144 42.2912-77.824 42.7008-0.2048 0.2048-0.4096 0.512-0.7168 0.7168L573.5424 973.7216c-3.1744 3.1744-7.2704 5.3248-11.776 6.2464l-158.0032 29.5936C402.432 1009.7664 401.1008 1009.8688 399.6672 1009.8688z" p-id="4366"></path></svg>
                            <span>编辑</span>
                        </div>
                        <div ref="del" @click="removeCreation">
                            <svg t="1637139617455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5337" width="200" height="200"><path d="M341.333333 426.666667a21.333333 21.333333 0 0 1 21.333334 21.333333v341.333333a21.333333 21.333333 0 1 1-42.666667 0v-341.333333A21.333333 21.333333 0 0 1 341.333333 426.666667z m170.666667 0a21.333333 21.333333 0 0 1 21.333333 21.333333v341.333333a21.333333 21.333333 0 1 1-42.666666 0v-341.333333a21.333333 21.333333 0 0 1 21.333333-21.333333z m170.666667 0a21.333333 21.333333 0 0 1 21.333333 21.333333v341.333333a21.333333 21.333333 0 1 1-42.666667 0v-341.333333a21.333333 21.333333 0 0 1 21.333334-21.333333zM86.4 213.333333h851.2c12.373333 0 22.4 9.557333 22.4 21.333334s-10.026667 21.333333-22.4 21.333333H86.4a21.888 21.888 0 0 1-22.4-21.333333c0-11.776 10.026667-21.333333 22.4-21.333334zM874.666667 320v570.965333c0 49.92-40.576 90.368-90.666667 90.368H240A90.496 90.496 0 0 1 149.333333 890.965333V320a21.333333 21.333333 0 0 1 42.666667 0v575.658667c0 25.173333 20.48 45.525333 45.696 45.525333H786.346667a45.653333 45.653333 0 0 0 45.696-45.525333V320a21.333333 21.333333 0 1 1 42.666666 0zM240 213.333333h544-544zM704 149.333333a21.333333 21.333333 0 1 1-42.666667 0V128a42.666667 42.666667 0 0 0-42.666666-42.666667h-213.333334a42.666667 42.666667 0 0 0-42.666666 42.666667v21.333333a21.333333 21.333333 0 0 1-42.666667 0V128a85.333333 85.333333 0 0 1 85.333333-85.333333h213.333334a85.333333 85.333333 0 0 1 85.333333 85.333333v21.333333z m-85.333333 149.333334h-213.333334 213.333334z" p-id="5338"></path></svg>
                            <span>删除</span>
                        </div>
                    </div>
                </div>
                <!-- 词条详情 -->
                <div class="more-box" v-if="!pageChoice">
                    <p>更多</p>
                    <div class="more-tab">
                        <div>
                            <svg t="1637139551861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3544" width="200" height="200"><path d="M753.784471 870.520471c0 34.334118-26.985412 62.162824-60.235295 62.223058h-542.117647c-33.310118 0-60.235294-27.888941-60.235294-62.223058v-559.585883c0-34.334118 26.925176-62.162824 60.235294-62.162823h542.117647c33.249882 0 60.235294 27.828706 60.235295 62.162823v559.585883z m-60.235295-683.91153h-542.117647c-66.56 0-120.470588 55.657412-120.470588 124.325647v559.585883c0 68.668235 53.910588 124.385882 120.470588 124.385882h542.117647c66.499765 0 120.470588-55.657412 120.470589-124.385882v-559.585883c0-68.668235-53.970824-124.325647-120.470589-124.325647" fill="#666666" p-id="3545"></path><path d="M211.365647 808.056471h240.941177v-62.223059h-240.941177v62.223059z m0-124.385883h421.647059v-62.162823h-421.647059v62.162823z m0-124.325647h421.647059V497.121882h-421.647059v62.223059z m0-124.385882h421.647059V372.856471h-421.647059V434.898824z" fill="#666666" p-id="3546"></path><path d="M875.098353 0.180706h-542.117647c-66.56 0-120.470588 55.657412-120.470588 124.325647h60.235294c0-34.334118 26.985412-62.162824 60.235294-62.162824h542.117647c33.249882 0 60.235294 27.828706 60.235294 62.162824v559.585882c0 34.334118-26.985412 62.162824-60.235294 62.223059v62.162824c66.56 0 120.470588-55.657412 120.470588-124.385883v-559.585882c0-68.668235-53.910588-124.325647-120.470588-124.325647" fill="#666666" p-id="3547"></path></svg>
                            <span>复制内容</span>
                        </div>
                        <div>
                            <svg t="1637143404145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12264" width="200" height="200"><path d="M1022.4 580.8L928 176c-6.4-30.4-35.2-128-169.6-128H488c-14.4 0-24 11.2-24 24S473.6 96 488 96h270.4c91.2 0 115.2 54.4 121.6 88v3.2l94.4 403.2c-1.6 40-33.6 70.4-73.6 70.4H712c-19.2 0-36.8 8-49.6 22.4-12.8 14.4-17.6 33.6-16 52.8l9.6 76.8c6.4 49.6-20.8 96-62.4 110.4-27.2 9.6-54.4 6.4-78.4-6.4-24-12.8-41.6-36.8-48-62.4-3.2-14.4-12.8-33.6-17.6-41.6l-16-30.4c-24-44.8-75.2-104-115.2-139.2-16-14.4-24-33.6-24-54.4V46.4H148.8c-67.2 0-121.6 54.4-121.6 121.6v364.8c0 67.2 54.4 121.6 121.6 121.6h118.4c4.8 8 11.2 16 19.2 24 35.2 32 83.2 86.4 104 126.4l16 30.4c4.8 9.6 11.2 22.4 12.8 30.4 9.6 40 36.8 75.2 72 94.4 36.8 19.2 78.4 22.4 118.4 9.6 64-22.4 104-91.2 96-163.2l-9.6-76.8c-1.6-6.4 1.6-11.2 4.8-14.4 1.6-1.6 6.4-6.4 12.8-6.4h188.8c67.2 0 121.6-54.4 121.6-121.6l-1.6-6.4z m-777.6 24h-96c-40 0-73.6-32-73.6-73.6V168C75.2 128 108.8 96 148.8 96h97.6v508.8z" fill="" p-id="12265"></path></svg>
                            <span>点踩</span>
                        </div>
                        <div>
                            <svg t="1637143424675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12512" width="200" height="200"><path d="M614.4 712.145455l-88.436364-46.545455c-6.981818-4.654545-18.618182-4.654545-25.6 0l-90.763636 44.218182c-11.636364 6.981818-16.290909 20.945455-11.636364 32.581818 6.981818 11.636364 20.945455 16.290909 34.909091 9.309091l81.454546-39.563636 79.127272 41.890909c11.636364 6.981818 27.927273 2.327273 32.581819-9.309091 6.981818-11.636364 0-25.6-11.636364-32.581818zM439.854545 467.781818c0-6.981818-2.327273-11.636364-6.981818-16.290909l-2.327272-2.327273-109.381819-88.436363c-9.309091-6.981818-25.6-6.981818-32.581818 2.327272-9.309091 9.309091-6.981818 23.272727 2.327273 32.581819l88.436364 72.145454-88.436364 72.145455c-9.309091 6.981818-11.636364 23.272727-2.327273 32.581818 9.309091 9.309091 23.272727 9.309091 32.581818 2.327273l109.381819-88.436364c4.654545-4.654545 9.309091-11.636364 9.30909-18.618182z" p-id="12513"></path><path d="M512 69.818182C267.636364 69.818182 69.818182 267.636364 69.818182 512s197.818182 442.181818 442.181818 442.181818 442.181818-197.818182 442.181818-442.181818S756.363636 69.818182 512 69.818182z m0 837.818182c-218.763636 0-395.636364-176.872727-395.636364-395.636364S293.236364 116.363636 512 116.363636s395.636364 176.872727 395.636364 395.636364-176.872727 395.636364-395.636364 395.636364z" p-id="12514"></path><path d="M735.418182 363.054545c-9.309091-9.309091-23.272727-9.309091-32.581818-2.327272l-107.054546 88.436363c-4.654545 4.654545-6.981818 9.309091-6.981818 16.290909s2.327273 13.963636 6.981818 16.29091l107.054546 88.436363c9.309091 6.981818 25.6 6.981818 32.581818-2.327273 9.309091-9.309091 6.981818-23.272727-2.327273-32.581818l-88.436364-69.818182 88.436364-72.145454c9.309091-6.981818 11.636364-20.945455 2.327273-30.254546z" p-id="12515"></path></svg>
                            <span>不感兴趣</span>
                        </div>
                        <div>
                            <svg t="1637143449906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13301" width="200" height="200"><path d="M512 358.555826c-12.288 0-22.26087 9.97287-22.26087 22.26087l0 268.221217c0 12.288 9.97287 22.26087 22.26087 22.26087s22.26087-9.97287 22.26087-22.26087L534.26087 380.816696C534.26087 368.528696 524.288 358.555826 512 358.555826zM512 716.176696c-12.288 0-22.26087 9.97287-22.26087 22.26087l0 44.699826c0 12.288 9.97287 22.26087 22.26087 22.26087s22.26087-9.97287 22.26087-22.26087l0-44.699826C534.26087 726.149565 524.288 716.176696 512 716.176696zM998.912 867.394783 575.688348 131.33913C559.972174 104.025043 536.754087 88.33113 512 88.33113S464.027826 104.025043 448.311652 131.33913L25.088 867.394783c-8.859826 15.426783-13.356522 30.675478-13.356522 45.345391 0 32.456348 23.908174 65.224348 77.312 65.224348l845.913043 0c53.381565 0 77.289739-32.768 77.312-65.224348C1012.268522 898.070261 1007.771826 882.821565 998.912 867.394783zM934.956522 933.420522 89.043478 933.420522c-9.861565 0-32.790261-2.025739-32.790261-20.702609 0-6.678261 2.56-14.669913 7.41287-23.129043L486.912 153.533217c15.137391-26.290087 35.06087-26.290087 50.198261 0l423.223652 736.033391c4.85287 8.45913 7.41287 16.450783 7.41287 23.129043C967.746783 931.394783 944.818087 933.420522 934.956522 933.420522z" p-id="13302"></path></svg>
                            <span>举报</span>
                        </div>
                    </div>
                </div>
            </template>
        </choice>
    </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
import entry from "../components/entry.vue"
import choice from "../components/choice.vue"
export default {
    name:"Detail",
    components:{
        entry,choice
    },
    data(){
        return{
            detailObj:{},
            entryId:"",
            pageChoice:false
        }
    },
    computed:{
        ...mapState(["entry","showChoiceFlag"])
    },
    methods:{
        ...mapMutations(["addLikes","removeLikes","addCollects","removeCollects","setshowChoiceFlag","removeCreationFromUser"]),
        back(){
            this.$router.go(-1);
        },
        getEntryObj(){
            this.detailObj=this.entry.data.filter(item=>{
                return item.id ==this.entryId;
            })[0];
        },
        collect(){
            if(this.userToken ==null){
                this.$router.push({path:"/login"})
            }
        },
        addLikeArr(obj){
            if(!obj.isLiked){
                // 添加到“我喜欢”的数组
                this.addLikes(obj);
            }else{
                this.removeLikes(obj.id);
            }
            let res ={
                id:obj.id,
                likeState:!obj.isLiked
            }
            this.$store.commit("entry/setLikeState",res);
        },
        addCollectArr(obj){
            if(!obj.isCollected){
                // 添加到“我喜欢”的数组
                this.addCollects(obj);
            }else{
                this.removeCollects(obj.id);
            }
            let res ={
                id:obj.id,
                collectState:!obj.isCollected
            }
            this.$store.commit("entry/setCollectState",res);
        },
        showChoice(){
            this.setshowChoiceFlag(true);
        },
        removeCreation(){
            this.removeCreationFromUser(this.entryId);
            this.$store.commit("entry/removeCreationFromData",this.entryId);
            this.$router.replace({path:"/home/my"});
        },
        editCreation(){
            this.$store.commit("entry/saveEntry",this.detailObj);
            this.$router.push("/sendEntry")
        }
    },
    mounted(){
        this.entryId = this.$route.params.id;
        this.getEntryObj();
    },
    beforeRouteEnter(to,from,next){
        if (from.path=="/home/home-main/recommend"||from.path=="/findResult") {
            next(vm=>{
                vm.pageChoice = false
            })
        }else if(from.path=="/myCreate"){
            next(vm=>{
                vm.pageChoice =true;
            });
        }
    }

}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.detail-header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 20px ; 
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    .header-left{
        svg{
            width: 20px;
            height: 20px;
        }
    }
    .header-right{
        svg{
            width: 20px;
            height: 20px;
        }
    }
}
.detail-main{
    width: 100%;
    height: 93%;
    background-color: $bodyCol;
    overflow-y: scroll;
    position: absolute;
    top: 50px;
    left: 0;
}
.entry{
    background-color: #fff;
    padding: 20px 15px;
    box-sizing: border-box;
    margin-top: 10px;
    .user{
        display: flex;
        align-items: center;
        .img-box{
            width: 30px;
            height: 30px;
            background-color: #777;
            border-radius: 50%;
            margin-right: 10px;
        }
        p{
            font-size: 14px;
        }
    }
    .title{
        font-size: 17px;
        font-weight: bold;
        position: relative;
        padding-left: 18px;
        margin: 15px 0 0 0;
        &::after{
            content: "";
            width: 6px;
            height: 18px;
            background-color: $mainCol;
            position: absolute;
            top: 3px;
            left: 0;
        }
    }
    .info{
        height: 30px;
        line-height: 30px;
        span{
            font-size: 12px;
            color: #999;
        }
        .time{
            margin-right: 15px;
        }
    }
    .content{
        margin-top: 10px;
        p{
            font-size: 14px;
            color: #666;
            line-height: 25px;
        }
    }
    .img-li{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-items: flex-start;
        padding: 0 5px;
        box-sizing: border-box;
        .img-box{
            width: 105px;
            height: 105px;
            flex-shrink:0 ;
            display: flex;
            align-items: center;
            position: relative;
            margin: 2px 2px;
            img{
                width: 100%;
            }
        }
    }
    .entry-bot{
        margin-top: 10px;
        display: flex;
        align-content: center;
        >div{
            flex-grow: 1;
            text-align: center;
            .icon{
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 3px;
                vertical-align: middle;
            }
            span{
                font-size: 13px;
                vertical-align: middle;
            }
            &.active{
                .icon{
                    path{
                        fill: $mainCol;
                    }
                }
            }
        }
    }
}

</style>